<template>
    <el-form
        class="form-inline"
        ref="formRef"
        :model="formData"
        label-width="100px"
        :rules="rules"
        status-icon
        :inline="true"
    >
        <el-row>
            <!-- <el-col :span="6">
                <el-form-item label="成本中心" prop="fee_owner">
                    <el-select
                        v-model="formData.fee_owner"
                        filterable
                        placeholder="Select"
                        :clearable="true"
                    >
                        <el-option
                            v-for="optValue in cntrOwner"
                            :key="optValue.value"
                            :label="optValue.label"
                            :value="optValue.value"
                        />
                    </el-select>
                </el-form-item>
            </el-col> -->
            <el-col :span="6">
                <el-form-item label="开始时间" prop="start_tim">
                    <el-date-picker
                        v-model="formData.start_tim"
                        type="datetime"
                        placeholder="Select"
                    />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="截止时间" prop="end_tim">
                    <el-date-picker
                        v-model="formData.end_tim"
                        type="datetime"
                        placeholder="Select"
                    />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-button type="primary" @click="onRefresh" size="default"
                    >查询</el-button
                >
                <el-button type="primary" @click="handleCommand" size="default"
                    >导出</el-button
                >
            </el-col>
        </el-row>
    </el-form>
    <el-table
        id="feedetreport-table-feedetreport"
        ref="tableRef"
        :data="tableData"
        v-bind="tableDefaultAttribute"
        row-key="id"
        table-layout="auto"
    >
        <template #empty>
            <span>无数据</span>
        </template>
        <template v-for="col in tableColumns" :key="col.prop">
            <el-table-column
                v-if="!col.isHidden"
                :align="col.align"
                :prop="col.prop"
                :label="col.label"
                :formatter="col.formatter"
                :type="col.type"
                :fixed="col.fixed"
                :width="col.width"
            >
            </el-table-column>
        </template>
    </el-table>
</template>
<script setup lang="ts" name="FeedetReport">
import { ref, reactive, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import {
    tableDefaultAttribute,
    useTableInfo,
    tableColumnDefault,
} from '@/hooks/useTable';
import { Request } from '@/app/request';
import { FeedetReportModel } from '@/common/types/business';
import { isEmpty } from 'lodash';
import { exportExcel, transFormatter } from '@/common/tools';
import { useAppStore } from '@/store/app';
import { TableColumn } from '@/common/types/app';
import { FormInstance, FormRules } from 'element-plus';
import { ValidateFieldsError } from 'async-validator';

type filterForm = {
    fee_owner?: number;
    start_tim?: Date;
    end_tim?: Date;
};
const tableData = ref<Array<FeedetReportModel>>([]);
const formRef = ref<FormInstance>();
const formData = reactive<filterForm>({});
const rules = reactive<FormRules>({
    start_tim: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
    end_tim: [{ required: true, message: '请选择截止时间', trigger: 'blur' }],
});
const { cntrOwner, feecod } = storeToRefs(useAppStore());
const handleCommand = () => {
    exportExcel('feedetreport-table-feedetreport');
};
onMounted(() => {

});
const onRefresh = async () => {
    const formValid = await formRef.value?.validate(
        (isValid: boolean, _invalidFields?: ValidateFieldsError) => {
            // return isValid;
        },
    );
    if (formValid) {
        const req = new Request('feedet报表', {
            start_tim: formData.start_tim,
            end_tim: formData.end_tim,

        });
        const r = await req.post();
        tableData.value.length = 0;

        if (!isEmpty(r.obj)) {
            /*for (let index = 0; index < r.obj.length; index++) {
                tableData.value.push({ ...r.obj[index], hasChildren: true });
            }*/
            tableData.value = r.obj;
        }
    }
};
const onFormatter = (_row: any, column: any, cellValue: any) => {
    let data: { value: string | number; label: string }[];
    if (column['property'] === 'fee_cod') {
        data = feecod.value;
    } else if (column['property'] === 'fee_owner') {
        data = cntrOwner.value;
    } else {
        return cellValue;
    }

    return transFormatter(cellValue, data);
};
const tableColumns = reactive<TableColumn[]>([
    {
        ...tableColumnDefault,
        order: 1,
        prop: 'fee_owner',
        label: '成本中心',
        formatter: onFormatter,
        formFieldItemType: 'single',
        optionalValues: cntrOwner.value,
        width: 300,
    },
    
    {
        ...tableColumnDefault,
        order: 4,
        prop: 'fee_cod',
        label: '费目',
        formatter: onFormatter,
        formFieldItemType: 'single',
        optionalValues: feecod.value,
        width: 120,
    },
    {
        ...tableColumnDefault,
        order: 6,
        prop: 'currency_cod',
        label: '币种',
        // formatter: onFormatter,
        formFieldItemType: 'input',
        // optionalValues: currency,
        width: 80,
    },
    {
        ...tableColumnDefault,
        order: 6,
        prop: 'in_amount',
        label: '应收金额',
        // formatter: onFormatter,
        formFieldItemType: 'input',
        // optionalValues: currency,
        width: 120,
    },
    {
        ...tableColumnDefault,
        order: 6,
        prop: 'out_amount',
        label: '应付金额',
        // formatter: onFormatter,
        formFieldItemType: 'input',
        // optionalValues: currency,
        width: 120,
    },
    {
        ...tableColumnDefault,
        order: 6,
        prop: 'income',
        label: '利润',
        // formatter: onFormatter,
        formFieldItemType: 'input',
        // optionalValues: currency,
        width: 120,
    },
]);

</script>
<style lang="scss" scoped>
.form-inline .el-input {
    --el-input-width: 220px;
}

.form-inline .el-select {
    --el-select-width: 220px;
}
</style>
